<template>
  <div class="wrapper">
    <home-header></home-header>
    <top-channel></top-channel>
    <scroller :class="['main-list', isIpx&&isIpx()?'ml-ipx':'']" offset-accuracy="300" loadmoreoffset="300"
              @loadmore="onloadmore">
      <refresher @loadingDown="loadingDown"></refresher>
      <div class="cell-button">
        <y-x-slider :imageList="YXBanners"></y-x-slider>
        <div class="slogan">
          <text class="i-slg iconfont">&#xe63a; 网易自营品牌</text>
          <text class="i-slg iconfont">&#xe63a; 30天无忧退货</text>
          <text class="i-slg iconfont">&#xe63a; 48小时快速退款</text>
        </div>
      </div>
      <div class="cell-button">
        <block-1 :title="makers.title" :items="makers.items"></block-1>
      </div>
      <div class="cell-button">
        <block-2 hasMore=true newGoods=true :head="recommend.head1" :goods="recommend.goods1"></block-2>
      </div>
      <div class="cell-button">
        <block-2 hasMore=true hotGoods=true :head="recommend.head2" :goods="recommend.goods2"></block-2>
      </div>
      <div class="cell-button">
        <block-3 :goods="goodsList"></block-3>
      </div>
    </scroller>
  </div>
</template>

<script>
  import HomeHeader from '@/components/HomeHeader'
  import TopChannel from '@/components/topChannel'
  import refresher from '@/components/refresh'
  import YXSlider from '@/components/YXSlider'
  import Block1 from '@/components/Block1.vue';
  import Block2 from '@/components/Block2.vue';
  import Block3 from '@/components/Block3.vue';

  var stream = weex.requireModule('stream');
  export default {
    name: "home",
    components: {HomeHeader, TopChannel, refresher, YXSlider,Block1,Block2,Block3},
    data() {
      return {
        YXBanners: [],
        makers: {
          title: '品牌SS制造商直供',
          items: []
        },
        recommend: {
          head1: {
            tlt: '周一周四 · 新品发布',
            tltBg: 'http://doc.zwwill.com/yanxuan/imgs/bg-new.png',
            url: 'http://m.you.163.com/item/newItem'
          },
          goods1: [],
          head2: {
            tlt: '人气推荐 · 好物精选',
            tltBg: 'http://doc.zwwill.com/yanxuan/imgs/bg-hot.png',
            url: 'http://m.you.163.com/item/recommend'
          },
          goods2: []
        },
        goodsList: [],
        showLoading: 'hide'
      }
    },
    created() {
      var that = this;
      stream.fetch({
        method: 'GET',
        type: 'json',
        url: 'http://cdn.zwwill.com/yanxuan/' + 'api/home/index',
      }, function (res) {
        let result = res.data.result;
        that.YXBanners = result['banners'];
        that.makers = result['makers'];
        that.recommend = result['recommend'];
      });
      stream.fetch({
        method: 'GET',
        type: 'json',
        url: 'http://cdn.zwwill.com/yanxuan/' + 'api/home/pullGoods',
      }, function (res) {
        let result = res.data.result;
        that.goodsList = result['goods'];
      });
    },
    methods: {
      onloading () {
        modal.toast({ message: 'loading', duration: 0.3 })
        this.showLoading = 'show';
        setTimeout(() => {
          this.goodsList.push(...this.recommend.goods1);
          this.showLoading = 'hide'
        }, 300)
      },
      onloadmore () {
        setTimeout(() => {
          this.goodsList.push(...this.recommend.goods1);
        }, 100)
      },
      loadingDown(){
        this.goodsList =[];
        this.goodsList.push(...this.recommend.goods2);
        this.goodsList.push(...this.recommend.goods1);
      }
    }
  }
</script>

<style scoped>
  .iconfont {
    font-family: iconfont;
  }
  .wrapper {
  }

  .main-list {
    position: fixed;
    top: 168px;
    bottom: 90px;
    left: 0;
    right: 0;
    /*margin-top: 167px;*/
    /*margin-bottom: 90px;*/
  }

  .ml-ipx {
    top: 208px;
    bottom: 140px;
  }

  .cell-button {
    padding-bottom: 18px;
  }

  .slogan {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #fff;
  }

  .i-slg {
    height: 66px;
    font-size: 26px;
    padding-top: 16px;
    flex: 1;
    text-align: center;
    color: #b4282d;
  }
</style>